<template>
  <div class="index-container">
    <div class="main-header clearfix">
      <el-row>
       <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <!-- <el-button type="primary"  icon="el-icon-plus" class="sureBtn"  size="medium"  @click="handleAdd" > 新 增 设 备</el-button> -->
           <span style="color: transparent;">1</span>
        </el-col>
        <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
          <div class="search fr">
            <div>
              <el-input  v-model="searchForm.name"   size="medium"  placeholder="老人姓名"></el-input>
            </div>
            <div>
              <el-date-picker
                v-model="searchForm.start_time"
                align="right"
                type="datetime"
                placeholder="请选择开始时间"
                @change="clear"
                @clear="clear"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </div>
            <div>
              <el-date-picker
                v-model="searchForm.end_time"
                align="right"
                type="datetime"
                placeholder="请选择结束时间"
                @change="clear"
                @clear="clear"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </div>
            <el-button size="medium"   type="primary"   icon="el-icon-search"  class="fr"    @click="onSearch" > 搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content" style="height: calc(100vh - 250px);">
      <main-table
        :columns="tableColumns"
        :data="tableList"
        :loading="loading"
        :pagination="pagination"
        @getData="fetchTableList"
        wrapperHeight="calc(100% - 73px)" height="100%"
      >
      <el-table-column slot="img" fixed="left" label="活动图片" width="150" align="center">
        <template slot-scope="scope">
          <img v-if="scope.row.img" class="contract-icon-img" :src="`data:image/jpeg;base64,${scope.row.img}`" @click="handleBigImage(scope.row)" alt="">
        </template>
      </el-table-column>
       <el-table-column slot="action" fixed="right" label="操作" width="230">
         <template slot-scope="scope">
            <el-button size="mini" type="success" @click="downloadAvatar(scope.row)"><i class="el-icon-download"></i> 下载头像</el-button>
           <!-- <el-button size="mini" type="success" @click="edit(scope.row)">编辑/查看</el-button> -->
           <el-button size="mini" type="danger" @click="cancelOrder(scope.row)">删除</el-button>
         </template>
       </el-table-column>

      </main-table>
    </div>

    <el-dialog title="老人头像" width="600px" :close-on-click-modal="false" :visible.sync="dialogImageVisible" :append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

  </div>
</template>
<script>
  import mainTable from "@/components/main-table/index";
  import * as APIDailycare from '@/api/dailycare'
  import { sex, age, elderlyCategory, sourceType, unixToDate, faceFailed } from "@/utils";
  export default {
    name: "helpManager-dailycare-capture-record",
    components: {
      mainTable
    },
    data() {
      return {
        loading: false,
        title: '添加图标',
        dialogVisible: false,
        dialogImageVisible: false,
        dialogImageUrl:'',
        ruleForm: {},
        searchForm: {
          page: 1
        },
        tableList:[],
        pagination: {
          current: 1,
          size: 10,
          total: 0
        },
        tableColumns: [
         {
           index: true,
           fixed: true
         },
         {
           slot: 'img'
         },
         {
           prop: 'name',
           label: '老人姓名'
         },
         {
           prop: 'tiwen',
           label: '老人体温',
           formatter (row, column, cellValue) {
             return cellValue && Number(cellValue).toFixed(2) + '℃'
           }
         },
         {
           prop: 'match_result',
           label: '比对结果',
           formatter (row, column, cellValue) {
             if (cellValue === '0') {
               return '未对比'
             } else if (cellValue === '-1') {
               return '对比失败'
             } else {
               if (cellValue) {
                 return '对比成功：' + cellValue + '分'
               } else {
                 return '对比成功'
               }
             }
           }
         },
         {
           prop: 'match_failed_reson',
           label: '未通过原因',
           formatter (row, column, cellValue) {
             return faceFailed(cellValue)
           }
         },
         {
           prop: 'face_quality',
           label: '人脸质量'
         },
         {
           prop: 'has_mask',
           label: '是否佩戴口罩',
           formatter (row, column, cellValue) {
             if (cellValue === 'true') {
               return '佩戴'
             } else {
               return '未佩戴'
             }
           }
         },
         {
           prop: 'team_name',
           label: '抓拍站点'
         },
         {
           prop: 'device_sn',
           label: '设备号',
           width: 200
         },
         {
           prop: 'create_time',
           label: '抓拍时间',
           width: 160,
           formatter (row, column, cellValue) {
             return unixToDate(cellValue)
           }
         },
         {
           slot: 'action'
         }
        ],
        key: Math.random(),
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.fetchTableList();
    },
    methods: {
      // 点击”查询“按钮 => 此时缓存查询参数
      onSearch () {
        this.pagination = {
          current: 1,
          size: 10,
          total: 0
        }
        this.fetchTableList()
      },
      load () {
        this.fetchTableList()
      },
      // 手动清空/搜索
      clear () {
        this.fetchTableList({ page: 1 })
      },
      fetchTableList(pageObj) {
        this.loading = true
        this.searchForm = {
          ...this.searchForm,
          ...pageObj
        }
        APIDailycare.rifacelogList(this.searchForm).then((resp) => {
          if (resp.code == 200) {
            const { list = [], total = 0 } = resp.data;
            this.tableList = list || []
            this.pagination.total = total;
          }
        }).finally(() => {
         this.loading = false
        });
      },
      handleBigImage (item) {
        this.dialogImageVisible = true
        this.dialogImageUrl = 'data:image/jpeg;base64,' + item.img
      },
      // 下载头像
      downloadAvatar (row) {
        const base64Url = row.img.toString()
        this.saveBas64Img(base64Url, row.name)
      },
      saveBas64Img (base64, name) {
        // const byteCharacters = atob(base64)
        // const byteNumbers = new Array(byteCharacters.length)
        // for (let i = 0; i < byteCharacters.length; i++) {
        //   byteNumbers[i] = byteCharacters.charCodeAt(i)
        // }
        // const byteArray = new Uint8Array(byteNumbers)
        // const blob = new Blob([byteArray], {
        //   type: undefined
        // })
        // const aLink = document.createElement('a')
        // aLink.download = `${name}.jpg` // 这里写保存时的图片名称
        // console.log(aLink)
        // aLink.href = URL.createObjectURL(blob)
        // aLink.click()
        const a = document.createElement('a')
        a.href = 'data:image/jpeg;base64,' + base64
        a.setAttribute('download', name || '头像')
        a.click()
      },
      cancelOrder(row) {
        this.$confirm("确定删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            APIDailycare.rifacelogDelete({ id: row.id }).then((resp) => {
              if (resp.code === 200) {
                this.$message({ type: "success", message: "删除成功!"});
                this.fetchTableList();
              }
            });
          })
          .catch(() => {
          });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        display: inline-block;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }

      .search > div {
        display: inline-block;
        margin-left: 20px;
      }
    }
    .task-icon-img{
      width: 80px;
      height: 80px;
    }
  }

  .form-footer {
    padding-left: 100px;
  }

  .dialog-main {
    .table-do {
      margin-bottom: 15px;
    }

    ::v-deep {
      th {
        .cell {
          color: #fff;
        }
      }
    }
  }
  .contract-icon-img{
    width: 40px;
    height: 40px;
    cursor: pointer;
  }
</style>
